<template>
	<view class="reset-page">
		<view class="reset-scroll">
			<view style="height: 100rpx;"></view>
			<view class="uni-form-item uni-column">
				<view class="title">
					<text class="uni-form-item__title">手机号</text>
				</view>
				<view class="form-item__box">
					<bnn-input maxlength="11" placeholder="请输入手机号" @input="onChangeInput($event, 'phone')"/>
				</view>
				<view class="h-line"></view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					<text class="uni-form-item__title">验证码</text>
				</view>
				<view class="form-item__box">
					<view class="form-item__input">
						<bnn-input maxlength="6" placeholder="请输入验证码" @input="onChangeInput($event, 'code')"/>
					</view>
					<view class="form-item__btn">
						<bnn-button size="mini" :disabled="!form.phone || !isSend" @click="sendSMSCode">
							{{second ? `${second}s重新获取`: '获取验证码'}}
						</bnn-button>
					</view>
				</view>
				<view class="h-line"></view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					<text class="uni-form-item__title">新密码</text>
				</view>
				<view class="form-item__box">
					<bnn-input password maxlength="16" placeholder="请输入新密码" @input="onChangeInput($event, 'password')"/>
				</view>
				<view class="h-line"></view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					<text class="uni-form-item__title">重复密码</text>
				</view>
				<view class="form-item__box">
					<bnn-input password maxlength="16" placeholder="请输入重复密码" @input="onChangeInput($event, 'password_repetition')"/>
				</view>
				<view class="h-line"></view>
			</view>
			<view class="uni-form-item">
				<bnn-button :disabled="(!form.phone || !form.code || !form.password)" @click="onSubmitForm">确定</bnn-button>
			</view>
		</view>
	</view>
</template>

<script>
	import regular from '@/utils/regular.js'
	import { toUserLoginPage } from '@/utils/PageRouter.js'
	import {siteResetSmsCode, siteReset} from '@/api/site.js'
	import bnnInput from '@/components/bnn-ui/input/index.vue'
	import bnnButton from '@/components/bnn-ui/button/index.vue'
	
	export default {
		components: {bnnInput, bnnButton},
		data() {
			return {
				form: {},
				timer: '',
				second: 0,
				isSend: true,
				isSubmit: false
			}
		},
		onLoad() {
			// this.$route.query
		},
		methods: {
			// //	发送短信验证码
			// siteSmsCode (phone) {
			// 	siteSmsCode ({mobile: phone, usage: 'register'}).then(res => {
			// 		res
			// 	}).catch(res => {
			// 		uni.showToast({title: res.message, icon: 'none'})
			// 	})
			// },
			//	发送短信验证码
			sendSMSCode() {
				const {form: {phone}} = this
				if((regular.telephone).test(phone)) {
					uni.showLoading({title: '加载中', mask: true})
					siteResetSmsCode({mobile: phone, usage: 'register'}).then(res => {
						this.openCountdown(res.data)
						uni.hideLoading()
					})
				} else {
					uni.showToast({icon: 'none', title: '手机号格式错误'})
				}
			},
			//	倒计时读秒
			openCountdown(data) {
				this.second = data
				this.isSend = false
				this.timer = setInterval(() => {
					const {second} = this
					this.second = second - 1
					if(this.second < 1) {
						this.isSend = true
						clearInterval(this.timer)
					}
				}, 1000)
			},
			//	输入框 change 事件
			onChangeInput(value, name) {
				this.$set(this.form, name, value)
			},
			//	确认重置
			onSubmitForm() {
				const {form} = this
				uni.showLoading({title: '加载中', mask: true})
				siteReset({
					code: form.code,
					group: 'app',
					mobile: form.phone,
					password: form.password,
					password_repetition: form.password_repetition
				}).then(res => {
					uni.hideLoading()
					uni.showToast({ icon: 'none', title: '重置成功' })
					this.$nextTick(() => {
						toUserLoginPage()
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reset-page{
		height: 100vh;
		.reset-scroll{
			height: 100%;
			padding: 0 30rpx;
			background: #fff;
		}
		.uni-form-item{
			margin-bottom: 50rpx;
			.form-item__box{
				padding: 16rpx 0 8rpx;
				display: flex;
				align-items: flex-end;
			}
			.form-item__input{flex: 1;}
			.form-item__btn{padding-left: 20rpx;}
			
			.title{color: $theme_color;}
			.h-line:after{background-color: $theme_color;}
		}
	}
</style>
